<template>
  <div class="container mx-auto px-6 py-12">
    <div class="text-center mb-16">
      <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">{{ products?.title }}</h2>
      <div class="w-20 h-1 bg-indigo-600 mx-auto mb-6"></div>
      <p class="text-gray-600 max-w-3xl mx-auto">
        {{ products?.description }}
      </p>
    </div>

    <div class="grid lg:grid-cols-3 gap-8">
      <div v-for="(item, index) in products?.items" :key="index"
        class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
        <img :src="item.image_url" :alt="item.title" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 mb-3">{{ item.title }}</h3>
          <p class="text-gray-600 mb-4">{{ item.description }}</p>
          <ul class="space-y-2 mb-6" v-if="item.features">
            <li v-for="(feature, fIndex) in stringToArray(item.features)" :key="fIndex"
              class="flex items-center text-gray-600">
              <span class="i-carbon-checkmark mr-2 text-indigo-500"></span>
              {{ feature }}
            </li>
          </ul>
          <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
            了解更多
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Product } from "~/types/page-admin"

const props = defineProps<{
  products?: Product
}>();

// 字符串转数组
const stringToArray = (str: string) => {
  return str.split(',').map(item => item.trim());
}

</script>